<template>
  <div class="upload-container">
    <el-link type="primary" @click="dialogVisible = true">添加视屏</el-link>
    <el-dialog :visible.sync="dialogVisible" title="上传视屏" width="30%">
      <el-upload
        :multiple="true"
        :show-file-list="true"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        :on-error="handleError"
        :before-upload="beforeUpload"
        :headers="headers"
        class="myUpload"
        :action="baseUrl"
      >
        <el-link size="small" type="primary">上传视屏</el-link>
      </el-upload>
      <div style="text-align:right">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crypto from 'crypto-js'
const appkey = 'Sz7Jo5M4T1smiHgS'
// eslint-disable-next-line radix
const timestamp = parseInt(Date.now() / 1000)
const nonceStr = 'HBxcnRjX'
export default {
  name: 'EditorSlideUpload',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      dialogVisible: false,
      listObj: {},
      fileList: [],
      headers: {
        Authorization: null
      },
      baseUrl: process.env.VUE_APP_BASE_API + '/web/upload/bigFile?source=web&type=courseware'
    }
  },
  created() {
    const temp = [appkey, timestamp, nonceStr, encodeURIComponent(this.baseUrl)].sort()
    const myTemp = temp.join('')
    const hmacSHA256 = crypto.HmacSHA256(myTemp, '2ac16dc294046ed43a87d70ad8cb08013fab0b57')
    const signature = crypto.enc.Base64.stringify(hmacSHA256)
    const signs = `appkey=${appkey},timestamp=${timestamp},nonceStr=${nonceStr},sign=${signature},data=${encodeURIComponent(this.baseUrl)}`
    const tokens = `${crypto.MD5(signs)}`
    this.headers = {
      Authorization: `bearer ${this.$store.state.account.accessToken}`,
      channel: '00',
      application: '02',
      source: 5,
      appkey,
      nonceStr,
      timestamp,
      sign: tokens

    }
  },
  methods: {
    checkAllSuccess() {
      // return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
    },
    handleSubmit() {
      this.dialogVisible = false
      this.$emit('successVic', this.fileList)
    },
    handleSuccess(response, file) {
      // const uid = file.uid
      this.fileList = [...this.fileList, { uid: file.uid, url: response.data }]
      // if (response.code === '0') {
      //   this.$emit('successVic', response.data)
      // }
    },
    handleRemove(file) {
      const uid = file.uid
      console.log(uid)
      const Index = this.fileList.findIndex((item) => {
        return item.uid === uid
      })
      this.fileList.splice(Index, 1)
    },
    beforeUpload(file) {
      console.log(file)
      let isVidie = true
      if (!file.type.includes('video')) {
        this.$message.error('必修上传视频文件')
        isVidie = false
      }
      return isVidie
    },
    handleError(e) {
      this.$message({
        type: 'error',
        message: '视屏上传失败'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.myUpload {
  margin-bottom: 30px;
}
</style>
